<!DOCTYPE HTML>
<html>
<head>
<title>Photo-Hub</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/mystyle.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/hander.js"></script>
<style type="text/css">
	.single_box{
		width: 100%;
		height:890px;
		margin:20px 0;
		background-color: rgb(246,246,246);
	}
	.image_box{
		margin-top:2px;
		width: 1597px;
		height: 888px;
		float: left;
		border:1px solid rgb(227,227,227);
		border-top:none;
		border-left:none;
		background-color:#fff;
		cursor: pointer;
	}
	.image_right{
		width:48px;
		height:886px;
		color:rgb(211,211,211);
		background-color:#fff;
		font-size: 50px;
		font-weight:900;
		float: left;
		text-align: center;
		padding-top:400px;
	}
	.image_left{
		width:48px;
		height:886px;
		color:rgb(211,211,211);
		background-color:#fff;
		font-size: 24px;
		font-size: 50px;
		font-weight:900;
		float: left;
		text-align: center;
		padding-top:400px;
	}
	.image_right:HOVER{
		background-color: rgb(230,230,230);
		color: #fff;
	}
	.image_left:HOVER{
		background-color: rgb(230,230,230);
		color: #fff;
	}
	.image_main{
		padding:25px 0px;
		width:1500px;
		height:838px;
		float: left;
		position:relative;
	}
	.image_show{
		position: absolute;  top: 50%;  left: 50%;
		transform: translate(-50%,-50%);
		display: block;
		max-width: 1500px;
		max-height: 838px;
		margin: 0 auto;
	}
	.image_info{
		width:300px;
		height:888px;
		float:left;
	}
	.single_info{
	    width: 1200px;
    	margin: 0 auto 20px;
	}
	.single_info .tag_head{
		margin-bottom: 10px !important;
	}
	.image_info_main{
		width:280px;
		background-color:#fff;
		margin: 0 auto;
		padding-left:20px;
	}
	.image_info h3{
		margin: 15px auto 0;
		background-color:#fff;
		width:280px;
		padding-top:15px;
		padding-left:10px;
		padding-bottom: 10px;
	}
	.image_info h3 span{
		background-color:#00C78A;
		padding:3px 5px;
		color: #fff;
	}
	.movie_option:last-child{
		padding-bottom: 20px;
	}
	.tags{
	    width: 280px;
    	margin: 0px auto;
    	background-color: #fff;
    	padding-top:15px;
    	padding-bottom:10px;
    	padding-left:10px;
	}
	.tags .tag_head{
		border-bottom: 1px solid rgb(233,233,233);
		margin-right:10px;
		padding-bottom: 5px;
		margin-bottom: 15px !important;
	}
	.tags_images{
		margin-bottom: 5px !important;
		
	}
	.tags_images li{
		width:84px !important;
		margin-bottom: 2%;
		margin-right: 2% !important;
	}
	.tags_images li .img-responsive{
		    width: 84px;
    		height: 60px;
	}
</style> 
 <script type="text/javascript">
 	$(document).ready(function(){
 		var path=getCookie("path");
 		if(path.indexOf('"')!=-1){
 			path=path.substring(1, path.length-1);
 		}
 		$(".image_show").attr("src","images/"+path);
 		$.ajax({
 			url:"CenterController",
 			data:{"operator":"singleInit","photoId":getCookie("photoId"),"albumId":getCookie("albumId")},
 			dataType:"json",
 			success:function(result){
 				var $imgs=$(".img-responsive");
 				$imgs.each(function(i){
 					$(this).attr("src","images/"+result[i].path);
 					$(this).parent().append($("<input type='hidden' value='"+result[i].id+"'>"));
 				});
 			}
 		});
 		var photoName=getCookie("name");
 		if(photoName.indexOf('"')!=-1){
 			photoName=photoName.substring(1, photoName.length-1);
 		}
 		$("#photoName").html(photoName);
 		$("#username").html(getCookie("userName"));
 		$("#click").html("#"+getCookie("click"));
 		$("#praise").html("#"+getCookie("praise"));
 		$("#date").html(getCookie("contentTime"));
 		$(".image_left").click(function(){
 			var num=getCookie("num");
 			if(num==""){
 				num=-1;
 			}
 			num=parseInt(num);
 			if(num==0){
 				num=parseInt(getCookie("size"));
 			}
 			$.ajax({
 				url:"CenterController",
 				data:{"operator":"left","num":num},
 				dataType:"JSON",
 				success:function(result){
 					var path=getCookie("path");
 			 		if(path.indexOf('"')!=-1){
 			 			path=path.substring(1, path.length-1);
 			 		}
 			 		$(".image_show").attr("src","images/"+path);
 			 		var photoName=getCookie("name");
 			 		if(photoName.indexOf('"')!=-1){
 			 			photoName=photoName.substring(1, photoName.length-1);
 			 		}
 			 		$("#photoName").html(photoName);
 			 		$("#username").html(getCookie("userName"));
 			 		$("#click").html("#"+getCookie("click"));
 			 		$("#praise").html("#"+getCookie("praise"));
 			 		$("#date").html(getCookie("contentTime"));
 					var $imgs=$(".img-responsive");
 	 				$imgs.each(function(i){
 	 					$(this).attr("src","images/"+result[i].path);
 	 					$(this).parent().append($("<input type='hidden' value='"+result[i].id+"'>"));
 	 				});
 				}
 			});
 			
 		});
		$(".image_right").click(function(){
			var num=getCookie("num");
 			if(num==""){
 				num=-1;
 			}
 			num=parseInt(num);
 			var size=parseInt(getCookie("size"));
 			if(num==size-1){
 				num=0;
 			}
 			$.ajax({
 				url:"CenterController",
 				data:{"operator":"right","num":num},
 				dataType:"JSON",
 				success:function(result){
 					var path=getCookie("path");
 			 		if(path.indexOf('"')!=-1){
 			 			path=path.substring(1, path.length-1);
 			 		}
 			 		$(".image_show").attr("src","images/"+path);
 			 		var photoName=getCookie("name");
 			 		if(photoName.indexOf('"')!=-1){
 			 			photoName=photoName.substring(1, photoName.length-1);
 			 		}
 			 		$("#photoName").html(photoName);
 			 		$("#username").html(getCookie("userName"));
 			 		$("#click").html("#"+getCookie("click"));
 			 		$("#praise").html("#"+getCookie("praise"));
 			 		$("#date").html(getCookie("contentTime"));
 					var $imgs=$(".img-responsive");
 	 				$imgs.each(function(i){
 	 					$(this).attr("src","images/"+result[i].path);
 	 					$(this).parent().append($("<input type='hidden' value='"+result[i].id+"'>"));
 	 				});
 				}
 			});
 		});
		$.ajax({
			url:"CenterController",
			data:{"operator":"allImage"},
			dataType:"text",
			success:function(result){
				console.log(result);
			}
		});
 		
 	});
 	//$("p.movie_option").load()
 </script>
  <body>
    <div class="header">
      <div class="container">
  	     <div class="logo">
					<h1><a href="index.html">Photo Hub</a></h1>
		 		 </div>
			 <div class="top_right">
			   <ul class="top_right_main">
					<li><a href="register.html">Register</a></li>|
					<li class="login" >
						 <div id="loginContainer"><a href="javascript:;" id="loginButton"><span>Login</span></a>
							  <div id="loginBox">
								  <form id="loginForm">
					                <fieldset id="body">
					                	<fieldset>
					                          <label for="userName">userName</label>
					                          <input type="text" name="userName" id="userName">
					                    </fieldset>
					                    <fieldset>
					                            <label for="password">Password</label>
					                            <input type="password" name="password" id="password">
					                     </fieldset>
					                    <input type="button" id="login" value="Sign in">
					                	<label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
					                	<div class="tip clr"></div>
					            	</fieldset>
					                 <span><a href="forgetPassword.html">Forgot your password?</a></span>
								   </form>
						      </div>
					      </div>
					  </li>
						<li>
						</li>
			   </ul>
				<script type="text/javascript">
							var value=getCookie('loginInfo');
							if(value.trim()!=""){
								$(".top_right_main").html("<li><a href='javascript:;' id='personal'>"+value+"</a></li>"
								+"<li><a href='javascript:;' id='exit'>Exit</a></li>");
							}
				</script>
			</div>
		  <div class="clearfix"></div>
		</div>
	</div>
	<div class="single">
		   <div class="single_box">
			 	<div class="image_box">
			 		<div class="image_left">&lt;</div>
			 		<div class="image_main"><img alt="" src="" class="image_show"></div>
			 		<div class="image_right">&gt;</div>
			 	</div>
			 	<div class="image_info">
			 		<h3><span>IMAGEINFO</span></h3>
			 		<div class="image_info_main">
				 		<p class="movie_option"><strong>Photo : </strong><span id="photoName"></span></p>
						<p class="movie_option"><strong>User : </strong><span id="username"></span></p>
						<p class="movie_option"><strong> Click: </strong><span id="click"></span></p>
						<p class="movie_option"><strong> Praise: </strong><span id="praise"></span></p>
						<p class="movie_option"><strong>Upload Date : </strong><span id="date"></span></p>
			 		</div>
			 		<div class="tags">
				  		<h4 class="tag_head">Similar Images</h4>
				       	<ul class="tags_images">
							<li><a href="javascript:;"><img src="images/pic40.jpg" class="img-responsive" alt=""/></a></li>
							<li><a href="javascript:;"><img src="images/pic41.jpg" class="img-responsive" alt=""/></a></li>
							<li><a href="javascript:;"><img src="images/pic42.jpg" class="img-responsive" alt=""/></a></li>
							<li><a href="javascript:;"><img src="images/pic43.jpg" class="img-responsive" alt=""/></a></li>
							<li><a href="javascript:;"><img src="images/pic43.jpg" class="img-responsive" alt=""/></a></li>
							<li class="last"><a href="javascript:;"><img src="images/pic39.jpg" class="img-responsive" alt=""/></a></li>
							<div class="clearfix"> </div>
				   		</ul>
		            </div>
			 	</div>
			<div class="clearfix"> </div>
		  </div>
	</div>
	<div class="single_info">
		<h4 class="tag_head">Keywords</h4>
	     <ul class="tags_links">
			<li><a href="javascript:;">People</a></li>
			<li><a href="javascript:;">City</a></li>
			<li><a href="javascript:;">Walking</a></li>
			<li><a href="javascript:;">Modern</a></li>
			<li><a href="javascript:;">Computer</a></li>
			<li><a href="javascript:;">Business</a></li>
			<li><a href="javascript:;">Tree</a></li>
			<li><a href="javascript:;">Motion</a></li>
			<li><a href="javascript:;">Gym</a></li>
			<li><a href="javascript:;">Men</a></li>
			<li><a href="javascript:;">Fashion</a></li>
			<li><a href="javascript:;">Industrial</a></li>
			<li><a href="javascript:;">Interior</a></li>
			<li><a href="javascript:;">Real Estate</a></li>
			<li><a href="javascript:;">Food</a></li>
		    <li><a href="javascript:;">Restaurants</a></li>
			<li><a href="javascript:;">Society</a></li>
			<li><a href="javascript:;">Traveller</a></li>
			<li><a href="javascript:;">Mountain</a></li>
			<li><a href="javascript:;">Sitting</a></li>
			<li><a href="javascript:;">Discovery</a></li>
			<li><a href="javascript:;">Activity</a></li>
			<li><a href="javascript:;">Resting</a></li>
			<li><a href="javascript:;">Blue</a></li>
			<li><a href="javascript:;">France</a></li>
			<li><a href="javascript:;">Architecture</a></li>
			<li><a href="javascript:;">Europe</a></li>
			<li><a href="javascript:;">Building</a></li>
	 	</ul>
	  	
	</div>
   
	<div class="grid_2">
		<div class="container">
			<div class="col-md-3 col_2">
				<h3>Stock Photo<br>Categories</h3>
			</div>
			<div class="col-md-9 col_5">
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li>
					    <input type="hidden" value="1">
					    <a href="stock.html">Abstract</a>
					    </li>
			            <li><input type="hidden" value="2"><a href="stock.html">Animals/Wildlife</a></li>
			            <li><input type="hidden" value="3"><a href="stock.html">The Arts</a></li>
			            <li><input type="hidden" value="4"><a href="stock.html">Backgrounds/Textures</a></li>
			            <li><input type="hidden" value="5"><a href="stock.html">Beauty/Fashion</a></li>
			            <li><input type="hidden" value="6"><a href="stock.html">Buildings/Landmarks</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="7"><a href="stock.html">Business/Finance</a></li>
			            <li><input type="hidden" value="8"><a href="stock.html">Celebrities</a></li>
			            <li><input type="hidden" value="9"><a href="stock.html">Editorial</a></li>
			            <li><input type="hidden" value="10"><a href="stock.html">Education</a></li>
			            <li><input type="hidden" value="11"><a href="stock.html">Food and Drink</a></li>
			            <li><input type="hidden" value="12"><a href="stock.html">Healthcare/Medical</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="13"><a href="stock.html">Holidays</a></li>
			            <li><input type="hidden" value="14"><a href="stock.html">Illustrations/Clip-Art</a></li>
			            <li><input type="hidden" value="15"><a href="stock.html">Industrial</a></li>
			            <li><input type="hidden" value="16"><a href="stock.html">Interiors</a></li>
			            <li><input type="hidden" value="17"><a href="stock.html">Miscellaneous</a></li>
			            <li><input type="hidden" value="18"><a href="stock.html">Model Released Only</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="19"><a href="stock.html">Nature</a></li>
			            <li><input type="hidden" value="20"><a href="stock.html">Objects</a></li>
			            <li><input type="hidden" value="21"><a href="stock.html">Parks/Outdoor</a></li>
			            <li><input type="hidden" value="22"><a href="stock.html">People</a></li>
			            <li><input type="hidden" value="23"><a href="stock.html">Religion</a></li>
			            <li><input type="hidden" value="24"><a href="stock.html">Science</a></li>
		            </ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<script type="text/javascript">
		//处理下方的categroy
		$.ajax(
				{
					url:"CenterController",
					type:"get",
					data:{'operator':'init','page':'index','part':'categroy'},
					dataType:"JSON",
					success:function(data){
						for(var i=0;i<data.length;i++){
							var $li=$(".list1 li").eq(i);
							$li.attr('onclick','choose(this)');
							var $input=$(".list1 li input").eq(i);
							$input.attr('value',data[i].id);
							var $a=$(".list1 li a").eq(i);
							$a.attr("href","javascript:;");
							$a.html(data[i].name);
						}
					}
				}
			);
	</script>
	<div class="grid_3">
	  <div class="container">
	  	 <ul id="footer-links">
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Royalty Free License</a></li>
			<li><a href="#">Extended License</a></li>
			<li><a href="#">Privacy</a></li>
			<li><a href="#">Support</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Categories</a></li>
         </ul>
         <p>Copyright © 2015 Photo-Hub. All Rights Reserved. </p>
	  </div>
	</div>
  
  </body>
</html>
